<template>
  <view class="container">
    <view class="swiper-margin" v-if="carouselImageData.carouselImageList.length!== 0">
      <uni-swiper-dot class="uni-swiper-dot-box"
        :info="carouselImageData.carouselImageList"
        :current="carouselImageData.current"
        mode="indexes"
        bottom="16"
        :dotsStyles="dotStyle"
        field="content">
     
      <swiper
        @change="change"
        class="swiper swiper-box introduce_img" 
        circular
		:current="carouselImageData.current"
        autoplay>
        <swiper-item class="swiper-item" v-for="(item, index) in carouselImageData.carouselImageList" :key="index">
          <view style="	background-color: #007aff;" class="swiper-item">
			  <image
				class="introduce_img"
				style="width: 100%; height: 100%"
				mode="aspectFill" 
				:src="item.src"
			   ></image>
		   </view>
        </swiper-item>
      </swiper>
	   </uni-swiper-dot>

    </view>

    <view class="events-container" v-if="eventsInfo.list.length">
      <view class="list-item" direction="row" v-for="info in eventsInfo.list" :key="info.id"  @click="jumpPage(info.id)">
       	 <view class="image-container">   <text style="font-family:AlimamaShuHeiTi-Bold;font-size:medium">{{info.title}}</text></view>
		 	 <view class="wenzi-container">   
			 <text style="font-family:dakai;font-size: 0.8em;color: #c2bfc5;">{{info.createBy}}</text>
			 <view style="font-family:sans-serif;font-size: 0.8em;color: #5bc5a0;margin-left: 0.3rem;" class="tag-item"   v-for="taginfo in info.tag" :key="taginfo.id">
			   <text >#{{taginfo}}</text>
			 </view>
			 </view>
		 
	     <view class="image-container">
		  <image  src="@/static/image/event/baomingzhong.png" style="width: 15%;height: 1.5rem;" mode="aspectFit" />
		  <text style=" flex: 1;font-weight:bold;font-size: 0.9em;font-family:Helvetica;">{{info.startTime}}|{{info.addr}}</text> 
		</view>
		 <view class="image-container">
			 <image class="image-iteml" :src="info.photo" mode="aspectFill" />
			 <image class="image-item" :src="info.photo" mode="aspectFill" />
			 <image class="image-itemr" :src="info.photo" mode="aspectFill" />
		 </view>
		 <view class="image-container">
			<view class="avatar-container">
				  <view class="avatar-item"   v-for="(imginfo, index) in info.peopleImg" :key="imginfo.id" alt="avatar">
			       <img class="avatar" :style="{'margin-left': index > 0 ? '-15rpx' : '0' }" :src="imginfo">
				 </view>
				<text style=" flex: 1;font-family:AlimamaShuHeiTi-Bold;margin-left: 10rpx;margin-top: -8rpx;">{{info.activatePeople}}人已上车</text>
				<button class="gradient-button">报名</button>
			</view>
		 </view>
     </view>
    </view>
   <view class="loading-state">
        <text v-if="loading">加载中...</text>
        <text v-if="finished">没有更多了</text>
      </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				eventsInfo:{
					list:[],
					total:"",
					page:"",
					current:""
				},
			   loading: false, // 加载状态
			   finished: false, // 是否全部加载完成
				carouselImageData:{
					carouselImageList:[],
					current:0,
					list:[]
				},
				dotStyle:{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
			}
		},
		onPullDownRefresh() {
			this.eventsInfo.page = 1
			this.finished = false
			this.eventsInfo.list = []
			this.loadData()
		},
		onReachBottom() {
			if (!this.finished && !this.loading) {
			  if(this.eventsInfo.total != this.eventsInfo.list.length){
				   this.eventsInfo.page++
				   this.loadData()
			  }
			}
		},

		 onLoad() {
		    // 页面加载时自动请求数据
			const app = getApp();
		    this.loadData();
			this.getCarouselImage();
		  },
		methods: {
			jumpPage(param){
			 uni.navigateTo({
			      url: '../eventDetail/eventDetail?id=' + param
			    })
			},
			change(e) {
				this.carouselImageData.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			},
			async loadData() {
				uni.request({
				  url:  getApp().globalData.url+'heartwx/activity/list',
				  type: '',
				  method: 'get',
				  data: {
					pageNum: this.eventsInfo.page,
					pageSize:10
				  }
				}).then(res => {
					
				  if (res.data.code === 200) {
					this.eventsInfo.list.push(...res.data.rows)
					this.eventsInfo.total = res.data.total
				  }
				})
			},
			getCarouselImage() {
				uni.request({
				  url:  getApp().globalData.url +'heartwx/system/pic/list',
				  method: 'get',
				  data: { location: 'events_index' },
					success: (res) => {
					if (res.data.code === 200) {
						this.carouselImageData.carouselImageList = res.data.rows
					  }
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
    @import '@/static/fonts/alimama.css';	
	@import '@/common/uni-nvue.scss';
	
	.loading-state {
	  text-align: center;
	  padding: 20rpx;
	  color: #999;
	  font-size: 24rpx;
	}
	@media screen and (min-width: 500px) {
				.uni-swiper-dot-box {
					width: 400px;
					margin: 0 auto;
					margin-top: 8px;
				}
	
				.image {
					width: 100%;
				}
	}
	
		.gradient-button {
		    width: 120rpx;
		    height: 60rpx;
			line-height: 60rpx;
		    border-radius: 25rpx;
		    color: #20fd93;
		    font-size: 30rpx;
		    background: linear-gradient(to right, #020101 0%, #fad0c4 99%, #fad0c4 100%);
		    cursor: pointer;
		    outline: none;
		}
		.gradient-button:hover {
		    background: linear-gradient(to right, #ff6b6b 0%, #ffa07a 99%, #ffa07a 100%);
		}
	
	.avatar-container {
	  display: flex;
	  padding-top: 6rpx;
	  height: 80rpx;
	  
	  align-items: center;
	  width: 98%;
	}
	
	.avatar-item {
	  position: relative;
	}
	
	.avatar {
	  width: 50rpx;
	  height: 50rpx;
	  border-radius: 50%;
	  background-color: #eee;
	  transition: transform 0.2s;
	}
	
	.list-item{
		background-color: #ffffff;
		border-radius: 30rpx;
		margin-top: 20rpx;
		padding: 10rpx;
	}
	.image-container {
	  display: flex;          /* 启用弹性布局‌:ml-citation{ref="1,3" data="citationList"} */
	  justify-content: space-between; /* 子项平均分布‌:ml-citation{ref="2,3" data="citationList"} */
	  width: 100%;   
	  align-items: center;
	  
	}
	.wenzi-container{
		 margin-top: 10rpx;
		 display: flex; 
		 width: 100%;
		 align-items: center;
	}
	.image-item {
	  width: 33%;             /* 三图等分宽度（留间隙）‌:ml-citation{ref="2,4" data="citationList"} */
	  height: 150rpx;         /* 固定高度或设为auto */
	 
	}
	.image-iteml {
	  width: 33%;             /* 三图等分宽度（留间隙）‌:ml-citation{ref="2,4" data="citationList"} */
	  height: 150rpx;         /* 固定高度或设为auto */
	  border-top-left-radius: 20rpx;
	  border-bottom-left-radius: 20rpx;
	}
	.image-itemr {
	  width: 33%;             /* 三图等分宽度（留间隙）‌:ml-citation{ref="2,4" data="citationList"} */
	  height: 150rpx;         /* 固定高度或设为auto */
	  border-top-right-radius: 20rpx;
	  border-bottom-right-radius: 20rpx;
	}
	.container {
	  min-height: 100vh;
	  background:  #f2f4f3 no-repeat top center;
	  background-size: 100%;
	}
	.notice-box {
	  position: fixed;
	  bottom: 10rpx;
	  left: 40rpx;
	  right: 40rpx;
	  border-radius: 10rpx;
	  background: #C9E7E6;
	  display: flex;
	  line-height: 24rpx;
	  font-size: 24rpx;
	  color: #000;
	  padding: 24rpx 20rpx;
	}
	.swiper-margin {
	  padding: 0 10rpx;
	  position: relative;
	  .swiper {
	    height: 350rpx;
	  }
	  .swiper-item {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    height: 100%;
	    width: 100%;
		color:#fff;
	  }
	  .dots-box{
	    position: absolute;
	    left:0;
	    right: 0;
	    bottom: 32rpx;
	    height: 14rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .dots-item{
	    height: 14rpx;
	    width: 14rpx;
	    border-radius: 50%;
	    background-color: rgba(0,0,0,0.16);
	    margin: 0 10rpx;
	    &.active{
	      background-color: #000;
	    }
	  }
	}
	.events-container {
	  padding: 10rpx 10rpx 10rpx 10rpx;
	  overflow: hidden;
	}
	.tab_nav {
	  white-space: nowrap;
	  // width: 100%;
	  margin-top: 40rpx;
	  overflow-y: auto;
	  .navTitle {
	    height: 42rpx;
	    line-height: 32rpx;
	    text-align: center;
	    font-size: 32rpx;
	    color: #414141;
	    font-weight: bold;
	    position: relative;
	    padding: 0 12rpx;
	    margin-left: 30rpx;
	    display: inline-block;
	    &.active{
	      color: #000;
	      &::after{
	        content: "";
	        position: absolute;
	        height: 14rpx;
	        border-radius: 100px;
	        background: #F39A41;
	        left: 0;
	        right: 0;
	        bottom: 6rpx;
	      }
	    }
	  }
	  .title_tabs {
	    position: relative;
	    z-index: 100;
	  }
	}
	.back-top{
	  width: 118rpx;
	  height: 118rpx;
	  position: fixed;
	  bottom: 120rpx;
	  right: 20rpx;
	  opacity: 0;
	  transition: all 0.5s;
	  &.ani{
	    opacity: 1;
	  }
	}
</style>
